import React, { useState } from 'react'
import {fromJS} from 'immutable'

export default function App() {
  const [obj, setobj] = useState(fromJS({
    name:'haozai',
    hobbit:['打篮球','踢足球','配音'],
    hometown:{
        province:'辽宁',
        city:'沈阳'
    }
  }))
  return (
    <div>
        <h3>个人信息修改</h3>
        <div>{obj.get('name')}</div>
        <div>{obj.get('hometown').get('province')}-{obj.get('hometown').get('city')}</div>
        <button onClick={()=>{
            setobj(obj.set('name','miaohao').setIn(['hometown','city'],'大连'));    //setIn可以直接深入所在层
        }}>修改信息</button>
        {obj.get('hobbit').map((item, index) =>
            <div key={item}>{item} <button onClick={()=>{
                setobj(obj.update('hobbit',(list)=> list.splice(index, 1)))
            }}>删除该项</button></div>)}
    </div>
  )
}
